<template>
  <div class="addhouse-page">
    <!-- 去出租 -->
    <van-nav-bar
      title="发布房源"
      left-arrow
      fixed
      @click-left="$router.push('/index')"
    />
    <div class="body">
      <div class="am-list-header">房源信息</div>
      <hr />
      <!-- 小区名称 租金 建筑面积 -->
      <van-form @submit="onSubmit">
        <!-- <van-cell-group></van-cell-group> -->
        <van-cell-group>
          <van-field
            v-model="housename"
            name="housename"
            label="小区名称"
            input-align="right"
            placeholder="请输入小区名称"
            @click="$router.push('/searchRend')"
          />
        </van-cell-group>
        <van-field
          v-model="money"
          name="money"
          label="租金"
          placeholder="请输入租金/月"
        >
          <template #extra>￥/月</template>
        </van-field>
        <van-field
          v-model="area"
          name="area"
          label="建筑面积"
          placeholder="请输入建筑面积"
        >
          <template #extra>m²</template>
        </van-field>
        <!-- 户型 -->
        <van-field
          name="pickerH"
          v-model="valueH"
          label="户型"
          placeholder="请选择"
          input-align="right"
          @click="showPickerH = true"
        />
        <van-popup v-model="showPickerH" position="bottom">
          <van-picker
            show-toolbar
            :columns="newColumnsH"
            @confirm="onConfirmH"
            @cancel="showPickerH = false"
          />
        </van-popup>
        <!-- 所在楼层 -->
        <van-field
          name="pickerF"
          v-model="valueF"
          label="所在楼层"
          placeholder="请选择"
          input-align="right"
          @click="showPickerF = true"
        />
        <van-popup v-model="showPickerF" position="bottom">
          <van-picker
            show-toolbar
            :columns="newColumnsF"
            @confirm="onConfirmF"
            @cancel="showPickerF = false"
          />
        </van-popup>
        <!-- 朝向 -->
        <van-field
          name="pickerC"
          v-model="valueC"
          label="朝向"
          placeholder="请选择"
          input-align="right"
          @click="showPickerC = true"
        />
        <van-popup v-model="showPickerC" position="bottom">
          <van-picker
            show-toolbar
            :columns="newColumnsC"
            @confirm="onConfirmC"
            @cancel="showPickerC = false"
          />
        </van-popup>
        <!-- 房屋标题 -->
        <van-field label="房屋标题" />
        <hr />
        <van-field
          v-model="housetitle"
          name="housetitle"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元)"
        />
        <!-- 房屋图像 -->
        <van-field label="房屋图像" />
        <hr />
        <van-field name="uploader" >
          <template #input>
            <van-uploader v-model="uploader" :after-read="afterRead" />
          </template>
        </van-field>

        <!-- 房屋配置 -->
        <van-cell-group class="con">
          <van-cell title="房屋配置" />
          <ul class="checklist" name="supporting">
            <li
              @click="changecek(item)"
              :class="{ active: item.checked }"
              v-for="(item, index) in checklist"
              :key="index"
            >
              <i :class="ficon + (index + 1)"></i>
              <p>{{ item.label }}</p>
            </li>
          </ul>
        </van-cell-group>
        <!-- 房屋描述 -->
        <van-field label="房屋描述" />
        <hr />
        <van-field
          v-model="desc"
          name="desc"
          rows="5"
          autosize
          type="textarea"
          placeholder="请输入房屋描述信息"
        />
        <!-- 提交 -->
        <div class="btn">
          <van-button class="del" type="default">取消</van-button>
          <van-button class="sub" type="primary" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { house, addHouse, getImage } from '@/api/house'
export default {
  data () {
    return {
      ficon: 'iconfont icon-haokez', // 字体图标
      housename: '',
      money: '',
      area: '',
      valueH: '',
      valueF: '',
      valueC: '',
      columnsH: [], // 户型
      columnsF: [], // 楼层
      columnsC: [], // 朝向
      newColumnsH: [],
      newColumnsF: [],
      newColumnsC: [],
      showPickerH: false,
      showPickerF: false,
      showPickerC: false,
      housetitle: '',
      desc: '',
      uploader: [],
      supporting: [],
      newConfig: [],
      checklist: [],
      file: ''// 图片
    }
  },
  async created () {
    const { body } = await house()
    console.log(body)
    body.supporting.forEach((item) => (item.checked = false))
    this.checklist.push(...body.supporting)
    this.columnsH = body.roomType
    this.columnsH.forEach((item) => {
      this.newColumnsH.push(item.label)
    })
    this.columnsF = body.floor
    this.columnsF.forEach((item) => {
      this.newColumnsF.push(item.label)
    })
    this.columnsC = body.oriented
    this.columnsC.forEach((item) => {
      this.newColumnsC.push(item.label)
    })
  },
  methods: {
    async onSubmit (v) {
      console.log(this.supporting.join('|'))
      this.columnsF.forEach((item) => {
        if (item.label === v.pickerF) {
          v.pickerF = item.value
        }
      })
      this.columnsH.forEach((item) => {
        if (item.label === v.pickerH) {
          v.pickerH = item.value
        }
      })
      this.columnsC.forEach((item) => {
        if (item.label === v.pickerC) {
          v.pickerC = item.value
        }
      })
      // this.columnsC.forEach((item) => {
      //   if (item.label === v.pickerC) {
      //     v.pickerC = item.value
      //   }
      // })
      const res = await addHouse({
        title: this.housetitle,
        description: this.desc,
        houseImg: this.file,
        oriented: v.pickerC,
        supporting: this.supporting.join('|'),
        price: this.money,
        roomType: v.pickerH,
        size: this.area,
        floor: v.pickerF,
        community: 'AREA|93cbbe43-741d-de54'
      })
      console.log(res)
      this.$toast.success('发布成功')
      this.$router.push('/rent')
      // console.log(v)
    },
    onConfirmH (value) {
      this.valueH = value
      this.showPickerH = false
    },
    onConfirmF (value) {
      this.valueF = value
      this.showPickerF = false
    },
    onConfirmC (value) {
      this.valueC = value
      this.showPickerC = false
    },
    changecek (val, index) {
      val.checked = !val.checked
      if (!this.supporting.includes(val.label)) {
        this.supporting.push(val.label)
      } else {
        this.supporting = this.supporting.filter((item) => item !== val.label)
      }
    },
    async afterRead (file) {
      // console.log(file)
      const form = new FormData()
      form.append('file', file.file)
      const res = await getImage(form)
      console.log(res)
      this.file = res.body[0]
    }
  }
}
</script>

<style lang="less" scoped>
// 房屋配置
.checklist {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 20%;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    .iconfont {
      font-size: 20px;
    }
  }
}
.active {
  color: #21b97a;
}
hr {
  color: #e7e7e7;
  border-width: 0.3px;
}
.body {
  margin-top: 70px;
  .am-list-header {
    text-align: left;
    padding-left: 20px;
    color: #21b97a;
    background-color: #fff;
    font-size: 15px;
  }
  .van-field {
    padding: 2px 20px;
    line-height: 30px;
    font-size: 14px;
  }
  .btn {
    margin-top: 20px;
    display: flex;
    .del {
      flex: 1;
    }
    .sub {
      flex: 1;
    }
  }
}
</style>
